<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片滚动</title>
    <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
    <link rel="stylesheet" href="css/base.css"/>
    <style>
        a {
            text-decoration:none;
        }
        a:hover {
            text-decoration:none;
            color:#37a508;
        }
        .show {
            width:710px;
            height:240px;
            float:left;
            position:relative;
            margin:0 20%;
        }
        .show a {
            display:block;
            width:18px;
            height:35px;
            font-family:'Songti';
            font-size:50px;
            color:#5f5f5f;
        }
        .show a.next {
            position:absolute;
            top:90px;
            left:0;
        }
        .show a.prev {
            position:absolute;
            top:90px;
            right:0;
        }
        .show .itemshow {
            width:640px;
            height:200px;
            margin:40px 0 0 40px;
            position:relative;
            overflow:hidden;
        }
        .show .itemshow ul.items {
            height:160px;
            position:absolute;
            top:0;
            left:0;
        }
        .show .itemshow ul.items li {
            width:160px;
            height:160px;
            float:left;
        }
        .show .itemshow ul.items li img {
            width:160px;
            height:160px;
            display: block;
        }
        .show .itemshow ul.items li span {
            width:160px;
            display:block;
            text-align: center;
            font-family: 'Microsoft YaHei';
            padding-top:10px;
            font-size:14px;
            color:#5f5f5f;
        }
        .show .itemshow ul.items li span:hover {
            color: #37a508;
        }


    </style>
</head>
<body>
<!--  盒子是itemsshow,UL在里头绝对定位，通过偏移来显示不同的内容 -->
<div class="show">
    <a href="javascript:;" class="next"><</a>
    <a href="javascript:;" class="prev">></a>
    <div class="itemshow">
        <ul class="items">
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/1.jpg" alt=""/>
                    <span>高级程序设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/2.jpg" alt="">
                    <span>编程艺术</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/3.jpg" alt="">
                    <span>权威指南</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/4.jpg" alt="">
                    <span>框架设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/5.jpg" alt="">
                    <span>数据结构与算法</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/6.jpg" alt="">
                    <span>权威教程</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/7.jpg" alt="">
                    <span>编程实战</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/8.jpg" alt="">
                    <span>高性能</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/9.jpg" alt="">
                    <span>深入浅出</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/10.jpg" alt="">
                    <span>响应式布局</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/11.jpg" alt="">
                    <span>JqueryMobile</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/12.jpg" alt="">
                    <span>富应用开发</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/13.jpg" alt="">
                    <span>数据结构与算法教程</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.jq-school.com/upload/20141205223755725/images/14.jpg" alt="">
                    <span>EcmaScript6</span>
                </a>
            </li>
        </ul>
    </div>
</div>


</body>
</html>
<script>
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};
        if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];
            e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
        return p;}('$(g(){r 2=0,i=4,h=1,9=p,5=$(\'.a .n o\'),6=$(\'.a .n o q\'),3=6.f(0).b()*h,7=(6.j-i)*6.f(0).b();' +
            '5.t({b:6.j*6.f(0).b()+\'8\'});$(\'.a .u\').k({l:g(){c(2<7){c((7-2)>=3){5.d({e:\'-=\'+3+\'8\'},9);2+=3}m{5.d({e:"-="+(7-2)+"8"},9);' +
            '2+=(7-2)}}}});$(".a .s").k({l:g(){c(2>0){c(2>3){5.d({e:"+="+3+"8"},9);2-=3}m{5.d({e:"+="+2+"8"},9);2=0}}}})})',31,31,'||tLen|mLen||iShow|iItmes|cLen|px|mTime|show|width|if|animate|left|eq|function|mNum|vNum|length|on|click|else|itemshow|ul|500|li|var|prev|css|next'.split('|'),0,{}))

</script>